/* vue */
import { defineComponent } from 'vue'

enum FormTimeEventNameEnum {
  Input = 'input',
  Confirm = 'confirm'
}

export default defineComponent({
  name: 'FormTime',
  emits: [
    FormTimeEventNameEnum.Input,
    FormTimeEventNameEnum.Confirm
  ],
  props: {
    clearable: {
      type: Boolean
    },
    disabled: {
      type: Boolean
    },
    readonly: {
      type: Boolean
    },
    field: {
      type: Object,
      default: () => ({})
    },
    format: {
      type: String
    },
    placeholder: {
      type: String,
      default: ''
    },
    value: {
      type: [String, Number, Date],
      default: ''
    },
    valueFormat: {
      type: String
    }
  },
  computed: {
    dateType(): string {
      return this.fieldSetting.dateType
    },
    editable(): boolean {
      return false
    },
    fieldName(): string {
      return this.field?.fieldName || ''
    },
    fieldSetting(): Record<string, any> {
      return this.field?.setting || {}
    },
    timePickID(): string {
      return `form_${this.fieldName}`
    },
  },
  methods: {
    onInputChangeHandler(value: Number) {
      this.$emit(FormTimeEventNameEnum.Input, value)
    },
    onConfirmHandler(value: Number) {
      this.$emit(FormTimeEventNameEnum.Confirm, value)
    }
  },
  render() {
    return (
      <el-time-picker
        id={this.timePickID}
        value={this.value}
        valueFormat={this.valueFormat}
        format={this.format}
        disabled={this.disabled}
        readonly={this.readonly}
        editable={this.editable}
        clearable={this.clearable}
        placeholder={this.placeholder}
        onInput={this.onInputChangeHandler}
        onConfirm={this.onConfirmHandler}
      >
      </el-time-picker>
    )
  }
})